import React, { useEffect } from 'react'
import './ContentFindMusic.scss'
import { useDispatch, useSelector } from 'react-redux'
import { getRecommendSongs, getResource } from '@/utils/api'
import { RootState } from '@/modules/RootState'
import { useNavigate } from 'react-router-dom'

function ContentFindMusic() {
  console.log('发现音乐内容')
  const dispatch = useDispatch()
  const musicList = useSelector((state:RootState) => state.musicList)
  const navigate = useNavigate()

  useEffect(()=>{
    if(!musicList.resourceList || musicList.resourceList.length == 0){
      dispatch(getResource())
      // dispatch(getRecommendSongs())
    }
  },[])

  const gotoMusic = (item:any,index:number) =>{
    var query = {id:item.id,len:item.trackCount,index:index}
    navigate(`/mylovemusic?name=${item.name}&id=${item.id}`,{state:query})
  }

  return (
    <div className='contentFindMusic-container'>
      <div className='container'>
        <span className='container-title'>推荐歌单  &gt;</span>
        <ul className='container-theme'>
          {
            musicList.resourceList.map((item,index)=>{
              return(
                <li key={index} onClick={()=>gotoMusic(item,index)}>
                  <img src={item.picUrl} alt="" />
                  <span>{item.name}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
      <div>
        <span>推荐歌曲</span>
        <div>

        </div>
      </div>
    </div>
  )
}

export default React.memo(ContentFindMusic)